<template>
  <div class="banner">
    <!-- 视频背景 -->
    <video 
      class="banner-video" 
      autoplay 
      loop 
      muted 
      playsinline
    >
      <source src="https://s.bmark.cn/bashu-culture/%E5%B7%B4%E8%9C%80%E6%96%87%E5%8C%96%E4%B8%AD%E5%BF%83_1.mp4" type="video/mp4">
    </video>

    <!-- 内容遮罩 -->
    <div class="banner-overlay">
      <div class="banner-content">
        <h1 class="banner-title">斑马中国</h1>
        <p class="banner-subtitle">您的数字资产增长伙伴</p>
        <div class="banner-buttons">
          <el-button type="primary" size="large" @click="handleStart">
            立即开始
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeBanner',
  
  methods: {
    handleStart() {
      this.$router.push('/copyright/evidence')
    }
  }
}
</script>

<style lang="scss" scoped>
.banner {
  position: relative;
  width: 100%;
  height: 100vh; // 使用视口高度
  overflow: hidden;
  margin-top: 0%;

  // 视频背景
  .banner-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; // 保持视频比例并填充容器
    z-index: 1;
  }

  // 遮罩层
  .banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); // 半透明黑色遮罩
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 内容区域
  .banner-content {
    text-align: center;
    color: #fff;
    
    .banner-title {
      font-size: 48px;
      font-weight: bold;
      margin-bottom: 20px;
      letter-spacing: 2px;
    }

    .banner-subtitle {
      font-size: 24px;
      margin-bottom: 40px;
      opacity: 0.9;
    }

    .banner-buttons {
      .el-button {
        padding: 15px 40px;
        font-size: 18px;
        border-radius: 25px;
        
        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
      }
    }
  }
}
</style> 